<template>
  <div class="app">
    <div class="form_wrap">
      <uni-list>
       <uni-list-item title="标题" :custom="true" :show-arrow="false">
          <div class="inputTip_box">
            <input type="text" placeholder="请输入标题" v-model="form.name" @blur="validateTitle">
            <span class="inputTip">{{inputTips.title}}</span>
          </div>
        </uni-list-item>

        <uni-list-item title="地址" :custom="true" @click="selArea">
          <div class="inputTip_box">
            <span class="phStyle" v-if="!form.short_address && !form.full_address">请选择</span>
            <template v-else>
                <p class="short_address">{{form.short_address}}</p>
                <p class="full_address">{{form.full_address}}</p>
            </template>
            <!-- <input type="text" placeholder="请选择" v-model=""> -->
          </div>
        </uni-list-item>

		<uni-list-item title="小区名称" :custom="true" @click="selCommunity">
			<span :class="{phStyle: !community_name}">{{community_name ? community_name : '请选择'}}</span>
		</uni-list-item>

        <uni-list-item title="门牌" :custom="true" :show-arrow="false">
          <div class="inputTip_box">
            <input type="text" placeholder="请输入门牌" v-model="form.house_no" @blur="validatehouse_no">
            <span class="inputTip">{{inputTips.house_no}}</span>
          </div>
        </uni-list-item>

          <!-- <picker :range="stageList" range-key="name" @change="onStageConfirm" :value="stageIndex"> -->
           <uni-list-item title="阶段" :custom="true" @click="chooseStage">
              <span :class="{phStyle: !stage_txt}">{{stage_txt ? stage_txt + '阶段' : '请选择'}}</span>
          </uni-list-item>
          <!-- </picker> -->

        <uni-list-item title="是否显示" :custom="true" :show-arrow="false">
          <view class="switch_box">
            <switch :checked="form.on_show" @change="onSwitchChange" color="#FFD11A" />
          </view>
        </uni-list-item>

         </uni-list>
    </div>
        	<!-- <mpvue-city-picker themeColor="#FFD11A" ref="mpvueCityPicker" :pickerValueDefault="defaultArea"
		 @onConfirm="onAreaConfirm"></mpvue-city-picker> -->

    <div class="btn_wrap">
      <div class="confirm_btn" @click="submit">完成</div>
    </div>

  </div>
</template>

<script>
import uniList from '@/components/uni-list/uni-list'
import uniListItem from '@/components/uni-list-item/uni-list-item'
import { addSite } from '@/api/constructionSite'
// import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
export default {
	name: 'AddConstructionSite',
	components: {
		uniList,
		uniListItem
		// ,
		// mpvueCityPicker
	},
	data() {
		return {
			form: {
				name: '',
				community_id: '',
				map_longitude: '',
				map_latitude: '',
				on_show: false,
				current_stage_id: '',
				house_no: '',
				short_address: '',
				full_address: ''
			},
			inputTips: {
				title: '',
				house_no: ''
			},
			community_name: '',
			stageIndex: 0,
			defaultArea: [0, 0, 0],
			stage_txt: '',
			stageList: [],
			areaID: [],
			address: '',
			option: {},
			addressInfo: '',
			adcode: ''
		}
	},
	onLoad(option) {
		this.option = option
		this.restoreForm()
		if (option.adcode) {
			this.adcode = option.adcode
		}
		// if (option.addressInfo) {
		// 	this.option.addressInfo = JSON.parse(option.addressInfo)
		// 	const { location, title, address } = this.option.addressInfo
		// 	this.form.map_longitude = location.lng
		// 	this.form.map_latitude = location.lat
		// 	this.form.short_address = decodeURIComponent(title)
		// 	this.form.full_address = decodeURIComponent(address)
		// 	this.adcode = this.option.addressInfo.adcode
		// }
		if (option.on_show) {
			if (option.on_show == 'true') {
				this.form.on_show = true
			} else {
				this.form.on_show = false
			}
		}
		if (option.stage_id) {
			this.form.current_stage_id = option.stage_id
		}
		if (option.stage_txt) {
			this.stage_txt = decodeURIComponent(option.stage_txt)
		}
		if (option.community_name) {
			this.community_name = decodeURIComponent(option.community_name)
		}
	},
	methods: {
		validateTitle() {
			const titleReg = /^[a-zA-Z\d\u4E00-\u9FA5]{1,32}$/g
			if (titleReg.test(this.form.name) || !this.form.name) {
				this.inputTips.title = ''
			} else if (this.form.name) {
				this.inputTips.title = '格式错误'
			}
		},
		validatehouse_no() {
			const house_noReg = /^[a-zA-Z\d\u4E00-\u9FA5-]{1,12}$/g
      		if (house_noReg.test(this.form.house_no) || !this.form.house_no) {
				this.inputTips.house_no = ''
			} else if (this.form.house_no) {
				this.inputTips.house_no = '格式错误'
			}
		},
		selArea() {
			const params = {
				...this.form,
				url: 'addCS'
				// url: '/pages/constructionSite/add'
			}
			uni.navigateTo({
				url: `/pages/location/index${this.commonJS.queryData(this.addParams(params))}`
			})
		},
		selCommunity() {
			if (!this.form.short_address) {
				uni.showToast({
					title: '请先选择地址',
					icon: 'none'
				})
				return
			}
			const params = {
				...this.form,
				district_id: this.adcode
			}
			console.log(this.addParams(params), '选择小区传参')
			uni.navigateTo({
				url: `/pages/constructionSite/communityList${this.commonJS.queryData(this.addParams(params))}`
			})
		},
		chooseStage() {
			let params = {
				...this.form,
				url: '/pages/constructionSite/add'
			}
			uni.navigateTo({
				url: `/pages/constructionSite/selStage${this.commonJS.queryData(this.addParams(params))}`
			})
		},
		restoreForm() {
			const keys = ['map_longitude', 'map_latitude', 'community_id']
			const decodeKeys = ['short_address', 'full_address', 'name', 'house_no']
			keys.forEach(item => {
				if (this.option[item]) {
					this.form[item] = this.option[item]
				}
			})
			decodeKeys.forEach(item => {
				if (this.option[item]) {
					this.form[item] = decodeURIComponent(this.option[item])
				}
			})
		},
		submit() {
			let flag = true
			Object.keys(this.form).forEach((item) => {
				if (!this.form[item] && item != 'on_show') {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					flag = false
				}
			})
			Object.keys(this.inputTips).forEach((item) => {
			  if (this.inputTips[item]) {
			    flag = false
			  }
			})
			const form = { ...this.form }
			form.on_show = Number(form.on_show)
			if (flag) {
				addSite(form).then(() => {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: `/pages/constructionSite/list`
						})
					}, 500)
				})
			}
		},
		addParams(params) {
			const keys = ['community_name', 'stage_txt', 'adcode']
			keys.forEach(item => {
				if (this[item]) {
					params[item] = this[item]
				}
			})
			if (this.form.current_stage_id) {
				params.stage_id = this.form.current_stage_id
			}
			return params
		},
		// showArea() {
		// 	this.$refs.mpvueCityPicker.show()
		// },
		// onAreaConfirm(e) {
		// 	this.address = e.label
		// 	this.areaID = e.code
		// },
		// onStageConfirm(e) {
		// 	this.stageIndex = e.target.value
		// 	this.stage_txt = this.stageList[this.stageIndex].name
		// },
		onSwitchChange(e) {
			this.form.on_show = e.detail.value
		}
	}
}
</script>

<style scoped lang="scss">
.app {
    padding-top: 20px;
    min-height: 100vh;
    background-color: #f5f5f5;
    .form_wrap {
        .label {
            font-size:28px;
            color:rgba(102,102,102,1);
        }
        .short_address,.full_address {
          line-height: 1.2;
        }
    }
    .phStyle {
      color: gray;
    }
    // .ph {
    //   font-size:28px;
    //   color:rgba(204,204,204,1);
    // }
    .switch_box {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
    .btn_wrap {
      padding: 60px 30px 0;
      .confirm_btn {
        height:90px;
        line-height: 90px;
        text-align: center;
        background:rgba(255,209,26,1);
        border-radius:45px;
        font-size:32px;
        color:rgba(58,27,4,1);
      }
    }
}
</style>
